<template>  
    <div class="bottom-navigation">  
      <div class="navigation-items">  
        <a  
          class="contact-customer-service" 
          @click.prevent="contactCustomerService"  
        >  
          联系客服  
        </a>  
        <a  
          class="add-to-cart"  
          @click.prevent="addToCart"  
        >  
          加入购物车  
        </a>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  import {mapActions } from 'vuex';  

  export default {  
    name: 'DetailNavigation',  
    methods: {  
      ...mapActions(['updateNavCurrent']),

      contactCustomerService() {  
        // 在这里实现联系客服的逻辑，例如打开一个新的页面或弹窗 
        const link = "/about"; 
        this.updateNavCurrent(link)
        this.$router.push(link); 
      },  
      addToCart() {  
        // 在这里实现加入购物车的逻辑，例如更新本地状态或调用API  
        alert('商品已加入购物车！');  
      },  
    },  
  };  
  </script>  
    
  <style scoped lang="less">  
  @base-font-size: 16px;  
  .bottom-navigation {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    position: fixed;  
    bottom: 0;  
    left: 0;  
    width: 100%;  
    background-color: #fff;  
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);  
    z-index: 999;  
    padding: 10px;  
    
    .navigation-items {  
      display: flex;  
      justify-content: space-between;  
      max-width: 360px;  
    
      a {  
        text-decoration: none;  
        color: #333;  
        font-size: (@base-font-size * 1em);  
        padding: (@base-font-size * 1em);  
        transition: color 0.3s ease;  
    
        &:hover {  
          color: #f00;  
        }  
      }  
    }  
    
    // 自定义联系客服和加入购物车的样式  
    .contact-customer-service {  
      // 这里可以添加特定的样式  
    }  
    
    .add-to-cart {  
      // 这里可以添加特定的样式  
    }  
  }  
  </style>